<template>
  <div class="table-box">
    <ProTable ref="proTableRef" row-key="id" title="动植物列表" :columns="columns" :request-api="loadTable" highlight-current-row>
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <ElButton type="primary" :icon="CirclePlus" @click="onAddClicked">新增</ElButton>
        <ElButton type="primary" :icon="Download" @click="excelFunction">导出</ElButton>
      </template>
      <!-- 账户操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
        <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
        <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
      </template>
    </ProTable>
    <AnimalPlantForm ref="formRef" @success="refresh" />
    <AnimalPlantView ref="viewRef" @success="refresh" />
  </div>
</template>

<script setup lang="ts" name="ZLAnimalPlant">
import { CirclePlus, Delete, EditPen, View, Download } from '@element-plus/icons-vue'
import AnimalPlantForm from './animalPlant-form.vue'
import AnimalPlantView from './animalPlant-view.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive } from 'vue'
import { AnimalPlant } from '@api/tby/summarize/animalPlant/interface'
import { pageAnimalPlant, removeAnimalPlant, options } from '@api/tby/summarize/animalPlant'
import { ElMessage, ElMessageBox } from 'element-plus'
import { FormType } from '@/enums'
import { listDictByType } from '@api/uc/dict'
import { optionsSpeciesCategory } from '@api/tby/common/speciesCategory'
import { exportExcel } from '@api/tby/common/common'

const proTableRef = ref<ProTableInstance>()

function refresh() {
  proTableRef.value?.getTableList()
}

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 表格列
const columns = reactive<ColumnProps<AnimalPlant.Record>[]>([
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'chName', label: '中文名', search: { el: 'input', key: 'chName', order: 1 }, align: 'center', minWidth: 200 },
  { prop: 'chPinyin', label: '中文拼音', align: 'center', minWidth: 200 },
  {
    prop: 'typeLevel',
    label: '物种分类',
    align: 'center',
    enum: typeLevels,
    search: { el: 'tree-select', key: 'typeLevel', props: { checkStrictly: true } },
    minWidth: 200
  },
  {
    prop: 'protectionLevel',
    label: '国家保护等级',
    align: 'center',
    enum: protectionLevels,
    search: { el: 'select', key: 'protectionLevel' },
    minWidth: 200
  },
  { prop: 'levelNames', label: '分类级别', align: 'center', minWidth: 300 },
  {
    prop: 'isSpecies',
    label: '是否旗舰物种',
    enum: isSpeciesArr,
    search: { el: 'select', key: 'isSpecies' },
    align: 'center',
    isShow: false,
    minWidth: 180
  },
  {
    prop: 'legend',
    label: '是否为图例',
    enum: AnimalPlant.legendEnum,
    search: { el: 'select', key: 'legend' },
    align: 'center',
    isShow: false,
    minWidth: 180
  },
  {
    prop: 'sponsorship',
    label: '冠名物种',
    enum: AnimalPlant.legendEnum,
    search: { el: 'select', key: 'sponsorship' },
    align: 'center',
    isShow: false,
    minWidth: 180
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
])

const loadTable = (query: AnimalPlant.Query) => {
  query.order = 'create_time desc'
  return pageAnimalPlant(query)
}

const formRef = ref<InstanceType<typeof AnimalPlantForm> | null>(null)
const viewRef = ref<InstanceType<typeof AnimalPlantView> | null>(null)

// 是否旗舰物种
async function isSpeciesArr() {
  const data = await options()
  return data
}
// 国家保护等级
async function protectionLevels() {
  const data = await listDictByType('protection_level')
  return data
}
// 物种分类
async function typeLevels() {
  const data = await optionsSpeciesCategory()
  return data
}
// 添加
const onAddClicked = () => {
  formRef.value?.open(FormType.ADD)
}

// 修改
const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 查看
const onViewClicked = (row: any) => {
  viewRef.value?.open(FormType.VIEW, row.id)
}

// 删除
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('是否删除数据?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    removeAnimalPlant(row.id).then(response => {
      console.log(response)
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      proTableRef.value?.getTableList()
    })
  })
}

const excelFunction = () => {
  exportExcel('/animal_plant/excel', proTableRef.value?.searchParam)
}
</script>
